:root {
  --accentColor: #7531ff;
}

body {
  font-family: 'Google Sans', system-ui, serif;
  line-height: 1.5;
  padding: 2rem 1rem;
}

.page-container {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 1rem;
}

img {
  width: 100%;
}

.card {
  display: grid;
  grid-template-columns: 40% auto;
  gap: 2rem;
  margin: 0 auto;
  border: 1px solid var(--accentColor);
  padding: 1rem;
}

.card-container:before {
  content: attr(data-size);
  position: absolute;
  left: 0;
  right: 0;
  top: -0.6rem;
  width: 6ch;
  margin: 0 auto;
  text-align: center;
  display: inline-block;
  background: var(--accentColor);
  color: white;
}

h2 {
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
}

h3 {
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  margin: 1rem 0 0.25rem;
  line-height: 1;
}

a {
  color: var(--accentColor);
}

.time {
  font-size: 1.5rem;
  font-weight: 300;
}

button {
  border: none;
  padding: 0.5rem;
  background: var(--accentColor);
  color: white;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
  margin-top: 1rem;
}
/* End Not CQ Things */

/* 
// Container Query things are here!
*/ 

/* First, set containment on the parent you're querying*/
.card-container {
  container-type: inline-size;
}

/* Then, you can style the parent's children based on its width */
@container (max-width: 850px) {
  .links {
    display: none;
  }
  
  .time {
    font-size: 1.25rem;
  }
  
  h2 {
    font-size: 2.2rem;
  }
}

@container (max-width: 650px) {
  .desc {
    display: none;
  }
  
  h2 {
    font-size: 2rem;
  }
  
  .card {
    gap: 1rem;
  }
}

@container (max-width: 460px) {
  .card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.5rem;
  }
  
  button {
    display: block;
    margin: 1rem auto 0;
  }
}

@container (max-width: 300px) {
  h2 {
    font-size: 1.5rem;
  }
  
  .time {
    display: none;
  }
}

.warning {
  max-width: 460px;
  margin: 2rem auto;
  background: #ffcebf;
  border: 1px solid tomato;
  padding: 1rem;
}

strong {
  font-weight: 800;
}

i {
  font-style: italic;
}

@supports (container-type: inline-size) {
  .warning {
    display: none;
  }
}